<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">营销短信管理</ui:define>
    <ui:define name="content">
        <script type="text/javascript">
            $(function () {
                PF('activityTypePanel').toggle();
                PF('productPanel').toggle();
                PF('channelPanel').toggle();
                // PF('userDefinitionPanel').toggle();
            });
        </script>
        <h:form>
            <p:dialog header="预估用户数量中,请稍候" widgetVar="loadingDialog" modal="true" closable="false" resizable="false"
                      draggable="false"/>
                      
            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar id="buttonToolBar">
                    <f:facet name="left">
                        <p:commandButton icon="fa fa-history"
                                         value="文本短信任务"
                                         process="@this"
                                         action="#{calculateSmsBean.onGoToTaskHistory}">
                            <f:setPropertyActionListener value="/views/family/user-info/send-sms/calculate-sms.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>

                        <p:commandButton icon="fa fa-history"
                                         value="语音短信任务"
                                         process="@this"
                                         action="#{calculateSmsBean.onGoToVoiceTaskHistory}">
                            <f:setPropertyActionListener value="/views/family/user-info/send-sms/calculate-sms.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>
                        <p:commandButton icon="fa fa-list-alt"
                                         value="计算任务"
                                         process="@this"
                                         action="#{calculateSmsBean.onGoToCalculateHistory}">
                            <f:setPropertyActionListener value="/views/family/user-info/send-sms/calculate-sms.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>
                        <p:commandButton icon="fa fa-users"
                                         value="用户定义"
                                         action="#{calculateSmsBean.onGoToUserDefinition}"
                                         process="@this">
                            <f:setPropertyActionListener value="/views/family/user-info/send-sms/calculate-sms.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>
                        <p:commandButton icon="fa fa-users"
                                         value="计算外部用户"
                                         action="#{calculateSmsBean.onGoToCalculateExternalSms}"
                                         process="@this">
                            <f:setPropertyActionListener value="/views/family/user-info/send-sms/calculate-sms.xhtml"
                                                         target="#{currentUserBean.back}"/>
                        </p:commandButton>
                    </f:facet>
                    <f:facet name="right">
                        <p:commandButton
                                actionListener="#{calculateSmsBean.onSaveSearchCondition}"
                                icon="fa fa-save"
                                value="保存查询模板"/>
                        <p:commandButton
                                actionListener="#{calculateSmsBean.onReset}"
                                icon="fa fa-refresh"
                                value="重置查询条件"
                                process="@this"
                                update="@form"/>
                        <p:commandButton
								actionListener="#{calculateSmsBean.onCalculateCount}"
                                icon="fa fa-calculator"
                                value="计算用户数量"
                                update="@form"/>
                                
                        <p:commandButton
                                actionListener="#{calculateSmsBean.onEstimate}"
                                icon="fa fa-gavel"
                                value="预估"
                                update="@form"
                                onstart="PF('loadingDialog').show();"
                                oncomplete="PF('loadingDialog').hide();"/>
                    </f:facet>
                </p:toolbar>
            </div>
            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g">
                    <h:panelGroup rendered="#{calculateSmsBean.estimatedSmsCount != null}">
                        <div class="ui-g-12">
                            <div class="card ui-g-12">
                                <div class="ui-g-12">
                                    短信预估人数 : <h:outputText style="color: red;"
                                                           value="#{calculateSmsBean.estimatedSmsCount}"/>
                                </div>
                            </div>
                        </div>
                    </h:panelGroup>
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                            <div class="ui-g-1">
                                <h:outputLabel value="查询模板"/>
                            </div>
                            <div class="ui-g-11">
                                <p:selectOneMenu value="#{calculateSmsBean.selectedSearchConditionId}" filter="true"
                                                 filterMatchMode="contains">
                                    <p:ajax update="@form" listener="#{calculateSmsBean.onSelectSearchCondition}"/>
                                    <f:selectItem itemLabel="" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{calculateSmsBean.smsSearchConditions}"
                                            var="searchCondition"
                                            itemLabel="#{searchCondition.conditionName}"
                                            itemValue="#{searchCondition.id}"/>
                                </p:selectOneMenu>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel value="模板名称"/>
                            </div>
                            <div class="ui-g-11">
                                <p:inputText value="#{calculateSmsBean.smsSearchConditionName}"/>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                            <div class="ui-g-1">
                                <p:outputLabel value="任务名称"/>
                            </div>
                            <div class="ui-g-11">
                                <p:inputText value="#{calculateSmsBean.$.name}"/>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                            <div class="ui-g-1">
                                <p:outputLabel value="登记时间"/>
                            </div>
                            <div class="ui-g-5">
                                <p:calendar value="#{calculateSmsBean.$.recordStartTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATE_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23"/>
                                <span>—</span>
                                <p:calendar value="#{calculateSmsBean.$.recordEndTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATE_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23"/>
                            </div>
                            <div class="ui-g-1">
                                <p:outputLabel value="注册时间"/>
                            </div>
                            <div class="ui-g-5">
                                <p:calendar value="#{calculateSmsBean.$.registerStartTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATE_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23"/>
                                <span>—</span>
                                <p:calendar value="#{calculateSmsBean.$.registerEndTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATE_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23"/>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                        
                            <div class="ui-g-1">
                                <p:outputLabel value="运营商"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectManyButton value="#{calculateSmsBean.$.telecomOperators}">
                                    <f:selectItem itemLabel="移动" itemValue="0"/>
                                    <f:selectItem itemLabel="联通" itemValue="1"/>
                                    <f:selectItem itemLabel="电信" itemValue="2"/>
                                </p:selectManyButton>
                            </div>
                            
                            <div class="ui-g-1">
                                <p:outputLabel value="用户类型"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectManyButton value="#{calculateSmsBean.$.userTypes}">
                                    <f:selectItems
                                            value="#{calculateSmsBean.dictionaries[DictionaryCode.SMS_USER_TYPE]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectManyButton>
                            </div>
                            
                            <div class="ui-g-1">
                                <p:outputLabel value="平台"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneButton value="#{calculateSmsBean.$.platform}">
                                    <f:selectItem itemLabel="苹果" itemValue="ios"/>
                                    <f:selectItem itemLabel="安卓" itemValue="android"/>
                                </p:selectOneButton>
                            </div>
                            
                             <div class="ui-g-1">
                                <p:outputLabel value="地区"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectCheckboxMenu label="-请选择-" id="province" value="#{calculateSmsBean.$.provinces}"
                                                      updateLabel="true" multiple="true" filter="true">
                                    <f:selectItems value="#{calculateSmsBean.provinces}" />
                           		</p:selectCheckboxMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="是否有信用卡"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="hasCredit" value="#{calculateSmsBean.$.hasCredit}">
                                    <p:ajax event="change" process="@this" update="calculateModePanel"/>
                                    <f:selectItem itemLabel="-请选择-" itemValue="" />
                                    <f:selectItem itemLabel="有" itemValue="1" />
                                    <f:selectItem itemLabel="无" itemValue="0" />
                                </p:selectOneMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="性别"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectManyButton value="#{calculateSmsBean.$.sexs}">
                                    <f:selectItem selected="selected" itemLabel="男" itemValue="1"/>
                                    <f:selectItem itemLabel="女" itemValue="0"/>
                                </p:selectManyButton>
                            </div>

                            <div class="ui-g-1"><p:outputLabel value="年龄"/></div>
                            <div class="ui-g-5">
                                <p:inputNumber inputStyle="width: 47%" id="min_version" value="#{calculateSmsBean.$.minAge}" disabled="#{memberRightsInfoBean.isView()}" />
                                <span>—</span>
                                <p:inputNumber inputStyle="width: 47%" id="max_version" value="#{calculateSmsBean.$.maxAge}" disabled="#{memberRightsInfoBean.isView()}"/>
                            </div>

                        </div>
                        
                        <p:outputPanel id="calculateModePanel">
                        		<div class="card ui-g-12">
                        		
                            <div class="ui-g-1">
                                <p:outputLabel value="计算模式"/>
                            </div>
                            <div class="ui-g-5">
		                        <p:selectOneMenu id="calculateMode" value="#{calculateSmsBean.$.calculateMode}">
		                        		 <p:ajax event="change" process="@this" update="calculateModePanel"/>
						             <f:selectItem itemLabel="立即计算" itemValue="0" />
						             <f:selectItem itemLabel="1次定时计算" itemValue="1" />
						        </p:selectOneMenu>
		                    </div>
                            
	                           <p:outputPanel id="calculateTime" rendered="#{calculateSmsBean.$.calculateMode eq '1'}">
	                           	 <div class="ui-g-1">
		                                <p:outputLabel value="定时计算时间"/>
	                            </div>
	                            <div class="ui-g-5">
	                                <p:calendar value="#{calculateSmsBean.$.calculateTime}"
	                                            styleClass="autoWidthCalendar"
	                                            locale="#{constants:get('LOCALE')}"
	                                            timeZone="#{constants:get('TIME_ZONE')}"
	                                            pattern="#{constants:get('DATETIME_FORMAT')}"
	                                            navigator="true"
	                                            converterMessage="日期格式输入错误! 例子: 2018-04-23 12:00:00"/>
	                            </div>
	                           </p:outputPanel>
                            
                        		</div>
                        
                        </p:outputPanel>
                        
                        <div class="card ui-g-12">
                        		<div class="ui-g-1">
                               <p:outputLabel value="剔除日期"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneButton value="#{calculateSmsBean.$.excludeSendedDay}">
                                    <f:selectItems
                                            value="#{calculateSmsBean.dictionaries[DictionaryCode.SMS_EXCLUDE_SENDED_DAY]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectOneButton>
                            </div>
		
                           <div class="ui-g-1">
                                <p:outputLabel value="剔除甲方"/>
                            </div>
                            <div class="ui-g-5">
                            		<p:selectCheckboxMenu label="-请选择-" value="#{calculateSmsBean.$.excludeSendedFirstPartyNames}"
                                                      updateLabel="true" multiple="true" filter="true">
                                    <f:selectItems value="#{calculateSmsBean.firstPartyNames}" />
                           		</p:selectCheckboxMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="剔除撞库甲方"/>
                            </div>
                            <div class="ui-g-5">
                                <p:selectCheckboxMenu label="-请选择-" value="#{calculateSmsBean.$.elimilateCheckFirstPartis}"
                                                      updateLabel="true" multiple="true" filter="true">
                                    <f:selectItems
                                            value="#{calculateSmsBean.dictionaries[DictionaryCode.SMS_ELIMINATE_CHECK_FIRST_PARTY]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectCheckboxMenu>
                            </div>


                        </div>
                        
                        <div class="card ui-g-12">
                            <p:panel header="用户定义" toggleable="false" closable="false" widgetVar="userDefinitionPanel">
                                <p:selectOneButton value="#{calculateSmsBean.$.selectedUserDefinitionId}">
                                    <p:ajax event="change" listener="#{calculateSmsBean.onSelectUserDefinition}"/>
                                    <f:selectItems value="#{calculateSmsBean.smsUserDefinitions}"
                                                   var="smsUserDefinition"
                                                   itemLabel="#{smsUserDefinition.name}"
                                                   itemValue="#{smsUserDefinition.id}"/>
                                </p:selectOneButton>
                            </p:panel>  
                        </div>

                        <div class="card ui-g-12">
                            <p:panel header="活动类型（多选）" toggleable="true" closable="false" widgetVar="activityTypePanel">
                                <p:selectManyButton value="#{calculateSmsBean.$.activityTypes}">
                                    <f:selectItems value="#{calculateSmsBean.activityTypes}"
                                                   var="type"
                                                   itemLabel="#{type.activityTypeName}"
                                                   itemValue="#{type.activityType}"/>
                                </p:selectManyButton>
                            </p:panel>
                        </div>

                        <div class="card ui-g-12">
                            <p:panel header="产品（多选）" toggleable="true" closable="false" widgetVar="productPanel">
                                <p:selectManyButton value="#{calculateSmsBean.$.products}">
                                    <f:selectItems value="#{calculateSmsBean.commProductIds}" var="product"
                                                   itemValue="#{product.productId}"
                                                   itemLabel="#{product.name}"/>
                                </p:selectManyButton>
                            </p:panel>
                        </div>

                        <div class="card ui-g-12">
                            <p:panel header="渠道（多选）" toggleable="true" closable="false" widgetVar="channelPanel">
                                <p:selectManyButton value="#{calculateSmsBean.$.channels}">
                                    <f:selectItems value="#{calculateSmsBean.commProductChannels}"
                                                   var="channel"
                                                   itemLabel="#{channel.channelName}"
                                                   itemValue="#{channel.channelCode}"/>
                                </p:selectManyButton>
                            </p:panel>
                        </div>
                    </div>
                </div>
             </div>
        </h:form>
    </ui:define>
</ui:composition>